<script setup lang="ts">
import { ref } from 'vue'
const userKey = ref('')
const password = ref('')
</script>
<template>
  <div class="passport-page signin-page">
    <div class="container-core">
      <div class="passport-page-head">
        <div class="passport-title">{{ $t('passport.sign-in-hello') }}</div>
      </div>
      <div class="passport-main-container">
        <div class="passport-form-container">
          <div class="passport-form-title">{{ $t('passport.sign-in-form.title') }}</div>
          <div class="passport-form-main">
            <div class="form-container">
              <ap-form>
                <ap-form-item :label="$t('passport.sign-in-form.userkey-label')">
                  <ap-input v-model="userKey" :placeholder="$t('passport.sign-in-form.userkey-placeholder')" allow-clear />
                </ap-form-item>
                <ap-form-item :label="$t('passport.sign-in-form.password-label')">
                  <ap-input v-model="password" type="password" :placeholder="$t('passport.sign-in-form.password-placeholder')" allow-clear />
                </ap-form-item>
                <ap-form-item>
                  <ap-button type="primary" fluid>{{ $t('passport.sign-in-form.sign-in-btn') }}</ap-button>
                </ap-form-item>
              </ap-form>
              <div class="passport-form-tip">
                <ap-link href="#" target="_blank">{{ $t('passport.sign-in-form.forget-tip') }}</ap-link>
              </div>
            </div>
          </div>
        </div>
        <div class="passport-form-container">
          <div class="passport-form-title">{{ $t('passport.not-sign-in-form.title') }}</div>
          <div class="passport-form-sub">{{ $t('passport.not-sign-in-form.continue-tip') }}</div>
          <div class="passport-form-main">
            <ap-button type="primary" fluid>{{ $t('passport.not-sign-in-form.continue-button-text') }}</ap-button>
          </div>
          <ap-divider>{{ $t('passport.not-sign-in-form.or') }}</ap-divider>
          <div class="passport-form-sub">{{ $t('passport.not-sign-in-form.sign-up-tip') }}</div>
          <div class="passport-form-main">
            <ap-button type="primary" fluid>{{ $t('passport.not-sign-in-form.sign-up-button-text') }}</ap-button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="passport-tip-container">
    <div class="container-core">
      <div>{{ $t('passport.ai-helper.link-before') }}<ap-link @callback="">{{ $t('passport.ai-helper.link-text') }}</ap-link>{{ $t('passport.ai-helper.link-after-text') }}</div>
    </div>
  </div>
</template>

<style src="./Passport.less" lang="less" scoped></style>
<style lang="less" scoped>

// Mobile
@media screen and (max-width: 767px) {}

// Tablet
@media screen and (max-width: 1023px) and (min-width: 768px) {}

// Desktop
@media screen and (min-width: 1024px) {}
</style>